<template>
  <div class="w-1/2 h-full px-0 py-5 my-0 mx-auto">
    <div class="w-full h-full px-20 flex flex-col bg-slate-50">
      <!--  封面  -->
      <div class="w-full flex items-center mt-5">
        <div class="mr-20">封面</div>
        <img-exhibition></img-exhibition>
      </div>
      <!--  标题  -->
      <div class="w-full flex mt-5">
        <div class="mr-20">标题</div>
        <div class="h-10 p-3 flex items-center rounded-md border border-slate-200">
          <input class="text-sm" v-model="videoInfo.title" placeholder="为你的视频起个标题吧！">
        </div>
      </div>
      <!--  类型  -->
      <div class="w-full flex mt-5">
        <div class="mr-20">类型</div>
        <div class="w-32 flex justify-between">
          <label>
            <input type="radio" v-model="videoInfo.type" name="videoType" value="自制">
            <span class="ml-2">自制</span>
          </label>
          <label>
            <input type="radio" v-model="videoInfo.type" name="videoType" value="转载">
            <span class="m-2">转载</span>
          </label>
        </div>
      </div>
      <!--  标签  -->
      <div class="w-full flex mt-5 items-center">
        <div class="mr-20">标签</div>
        <div class="h-10 p-3 flex items-center rounded-md border border-slate-200">
          <input class="text-sm" v-model="inputTag" @keydown.enter="addTag(inputTag)" placeholder="贴上几个标签如何？">
        </div>
        <video-tag :tags="videoInfo.tag"></video-tag>
      </div>
      <!--  简介  -->
      <div class="w-full flex mt-5">
        <div class="mr-20">简介</div>
        <div class="h-10 p-3 flex items-center rounded-md border border-slate-200">
          <input class="text-sm" v-model="videoInfo.description" placeholder="简单介绍一下你的视频吧~">
        </div>
      </div>
      <!--  投稿  -->
      <div class="w-full flex justify-center mt-5">
        <el-button @click="uploadVideo">立即投稿</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import {reactive, ref, watch} from "vue";
import {useVideo} from "@/store/video";
import {upload} from "@/api/video";
import {fileToBlob} from "@/utils/file";
import {getToken} from "@/utils/application";
import {getUserByToken} from "@/api/user";

interface videoInfo{
  videoFile: File | Blob | null | object,
  videoCover: File | Blob | null | object,
  title: string,
  type: string,
  tag: object,
  description: string,
}

const inputTag = ref("")

function addTag(tag) {
  videoInfo.tag.push(tag)
  inputTag.value = ""
}

watch(() => useVideo().videoCover, (newCover) => {
  videoInfo.videoCover = newCover;
});

watch(() => useVideo().videoFile, (newFile) => {
  videoInfo.videoFile = newFile;
});

const videoInfo = reactive<videoInfo>({
  videoFile: useVideo().videoFile,
  videoCover: useVideo().videoCover,
  title: "",
  type: "",
  tag: [],
  description: "",
})

async function uploadVideo() {
  const userData = await getUserByToken()
  console.log(userData.data.id)
  const videoFormData = new FormData();
  videoFormData.append('videoFile', videoInfo.videoFile);
  videoFormData.append('videoCover', videoInfo.videoCover);
  videoFormData.append('title', videoInfo.title);
  videoFormData.append('type', videoInfo.type);
  videoFormData.append('tag', videoInfo.tag.join(','));
  videoFormData.append('description', videoInfo.description);
  videoFormData.append("creator", userData.data.id)

  await upload(videoFormData);
}

</script>

<style scoped>
input{
  outline: none;
  background-color: transparent;
}


</style>
